<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>大品战略地图</title>
    <style>
        body,html{
            width:100%;
            height:100%;
            margin: 0;
            padding:0;
            font-family: "微软雅黑";
            font-size:14px;
            overflow: hidden;
            background-color:black;
        }
        #container{
            width: 100%;
            height: 100%;
            margin: 0;
            position:relative;
            overflow: hidden;
        }
        .navBox{
            width:90%;
            height:37%;
            position:absolute;
            top:93%;
            bottom: 0;
            left:2.5%;
            overflow: scroll;
            background-color:white;
            border-radius: 10px;
            padding:10px;
            transition:all 1s;
            z-index:999;
        }
        .menu{
            width:100%;
            border-bottom: 1px solid darkgrey;
            height:8%;
            z-index: 9999;
        }
        .returnTop{
            display: block;
            position: absolute;
            z-index: 9999999;
            left:20px;
            top:15px;
            width:44px;
            height:44px;
            background-image: url("");				background-color:rgba(0,0,0,0);
            background-repeat: no-repeat;
            background-size:100%;
            outline: none;
            border:none;
            cursor: pointer;
        }
        /**
        * 利用 containerClassNames: 'my-marker' 设置label样式
        */
        .amap-simple-marker.my-marker .amap-simple-marker-label {
            color: #fff;
            font-size: 16px;
            font-style: italic;
            text-decoration: line-through;
        }
        /**去高德水印**/
        .amap-logo {
            right: 0 !important;
            left: auto !important;
            display: none;
        }
        .amap-copyright {
            right: -100px !important;
            left: auto !important;
        }
        .menu:focus{
            background-color:white;
        }
        .openUploader{
            cursor: pointer;
        }
        .navBox h5 span{
            padding-left:1.67em;
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="container">
    <div class="navBox">
        <div class="menu"></div>
        <div class="business_info">
        </div>
    </div>
</div>
<button class="returnTop">
<script src="{{ env('CDN_DOMAIN_NAME') }}/js/app.js"></script>
<script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=9a78e1fd6cb16ea2e249efa6ff52ab6f'></script>
<!-- UI组件库 1.0 -->
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.10"></script>
<script>
    var province;
    var poiInfo;
    var shop;
    var area_code;
    $.ajax({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        },
        url:'/test',
        data:{
        },
        type:'get',
        dataType: 'json',
        success:function(res){
            var sum = 0;
            $.each(res.msg,function (item) {
                sum += res.msg[item]
            });
            $(".navBox").append("<h5>全国共"+sum+"位客户</h5>");
            province = res.msg;
        }
    });
    var checkOpen = 0;
    $(".menu").click(function () {
        if(checkOpen == 0){
            $(".navBox").css("top","63%");
            checkOpen = 1;
            return false;
        }
        if(checkOpen == 1){
            $(".navBox").css("top","93%");
            checkOpen = 0;
            return false;
        }
    });
//    $("#container .amap-maps").click(function () {
//
//    });
    var map = new AMap.Map('container', {
        zoom: 4,
        mapStyle: 'amap://styles/c02d507ab704b6ed399c6f1c7ea7d8a0'//样式URL
    });
    var city;
    var district;
    AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {
        //创建一个实例
        var districtExplorer = window.districtExplorer = new DistrictExplorer({
            eventSupport: true, //打开事件支持
            map: map
        });
        //当前聚焦的区域
        var currentAreaNode = null;
        //feature被点击
//        var city;
//        var district;
        districtExplorer.on('featureClick', function(e, feature) {
            $(".navBox").css("top","93%");
            if(feature.properties.level == "province"){         //点击省份 渲染市区
                if(feature.properties.name == "上海市" || feature.properties.name == "北京市" || feature.properties.name == "重庆市" || feature.properties.name == "天津市"){
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        url:'/test6',
                        data:{
                            adCode:feature.properties.adcode
                        },
                        type:'get',
                        async : false,
                        dataType: 'json',
                        success:function(res){
                            var sum = 0;
                            $.each(res.msg,function (item) {
                                sum += res.msg[item]
                            });
                            $(".navBox h5").remove();
                            $(".navBox h6").remove();
                            $(".navBox").append("<h5>"+feature.properties.name+"共"+sum+"位客户</h5>");
                            district = res.msg;
                            //POI回调
                            poiInfo = res.data;
                            shop =res.shops;
                            showPoi();
                        }
                    });
                }else{
                    $.ajax({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                        },
                        url:'/test3',
                        data:{
                            adCode:feature.properties.adcode
                        },
                        type:'get',
                        async : false,
                        dataType: 'json',
                        success:function(res){
                            var sum = 0;
                            $.each(res.msg,function (item) {
                                sum += res.msg[item]
                            });
                            $(".navBox h5").remove();
                            $(".navBox h6").remove();
                            $(".navBox").append("<h5>"+feature.properties.name+"共"+sum+"位客户</h5>");
                            city = res.msg;
                        }
                    });
                }
            }
            if(feature.properties.level == "city"){         //点击市区 渲染区县
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url:'/test4',
                    data:{
                        adCode:feature.properties.adcode
                    },
                    type:'get',
                    async : false,
                    dataType: 'json',
                    success:function(res){
                        var sum = 0;
                        $.each(res.msg,function (item) {
                                sum += res.msg[item]
                        });
                        $(".navBox h5").remove();
                        $(".navBox h6").remove();
                        $(".navBox").append("<h5>"+feature.properties.name+"共"+sum+"位客户</h5>");
                        district = res.msg;
                        //POI回调
                        poiInfo = res.data;
                        shop =res.shops;
                        showPoi();
                    }
                });
            }
            if(feature.properties.level == "district"){         //点击区块 通过adcode匹配用户数量 通过adcode匹配该区域客户
                        $(".navBox").css("top","63%");
                        var sum = 0;
                        for(var tmp in district){
                            if(tmp == feature.properties.adcode){
                                sum += district[tmp];
                            }
                        }
                        $(".navBox h5").remove();
                        $(".navBox h6").remove();
                        $(".navBox").append("<h5>"+feature.properties.name+"共"+sum+"位客户</h5><h5><button class='openUploader'>点击在此区域记录商家</button></h5>");
                        for(var i=0;i<poiInfo.length;i++){
                            if(poiInfo[i].area_code == feature.properties.adcode){
                                $(".navBox").append("<h5 class='poiname'>"+poiInfo[i].username+"<span>"+poiInfo[i].user_tel+"</span></h5>");
                            }
                        }
                        area_code=feature.properties.adcode
            }
            var props = feature.properties;
            //如果存在子节点
            if (props.childrenNum > 0) {
                //切换聚焦区域
                switch2AreaNode(props.adcode);
            }
        });
        //外部区域被点击
        districtExplorer.on('outsideClick', function(e) {
            $(".navBox").css("top","93%");
            districtExplorer.locatePosition(e.originalEvent.lnglat, function(error, routeFeatures) {
                if (routeFeatures && routeFeatures.length > 1) {
                    //切换到省级区域
                    switch2AreaNode(routeFeatures[1].properties.adcode);
                    if(routeFeatures[1].properties.level == "province"){         //切换临近的省份
                        if(routeFeatures[1].properties.name == "上海市" || routeFeatures[1].properties.name == "北京市" || routeFeatures[1].properties.name == "重庆市" || routeFeatures[1].properties.name == "天津市"){
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                url:'/test6',
                                data:{
                                    adCode:routeFeatures[1].properties.adcode
                                },
                                type:'get',
                                async : false,
                                dataType: 'json',
                                success:function(res){
                                    var sum = 0;
                                    $.each(res.msg,function (item) {
                                        sum += res.msg[item]
                                    });
                                    $(".navBox h5").remove();
                                    $(".navBox h6").remove();
                                    $(".navBox").append("<h5>"+routeFeatures[1].properties.name+"共"+sum+"位客户</h5>");
                                    district = res.msg;
                                    $(".amap-e .amap-custom").remove();
                                }
                            });
                        }else{
                            $.ajax({
                                headers: {
                                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                                },
                                url:'/test3',
                                data:{
                                    adCode:routeFeatures[1].properties.adcode
                                },
                                type:'get',
                                async : false,
                                dataType: 'json',
                                success:function(res){
                                    var sum = 0;
                                    $.each(res.msg,function (item) {
                                        sum += res.msg[item]
                                    });
                                    $(".navBox h5").remove();
                                    $(".navBox h6").remove();
                                    $(".navBox").append("<h5>"+routeFeatures[1].properties.name+"共"+sum+"位客户</h5>");
                                    city = res.msg;
                                    $(".amap-e .amap-custom").remove();
                                }
                            });
                        }
                    }
                } else {
                    //切换到全国
                    switch2AreaNode(100000);
                }
            },{
                levelLimit: 2
            });
        });
        //返回顶部
        $(document).on("click",".returnTop",function(e){
            levelLimit: 2;
            switch2AreaNode(100000);
            $(".amap-e .amap-custom").remove();   //删除海量点
            $.ajax({            //回到全国
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                },
                url:'/test',
                data:{
                },
                type:'get',
                dataType: 'json',
                success:function(res){
                    var sum = 0;
                    $.each(res.msg,function (item) {
                        sum += res.msg[item]
                    });
                    $(".navBox h5").remove();
                    $(".navBox h6").remove();
                    $(".navBox").append("<h5>全国共"+sum+"位客户</h5>");
                    province = res.msg;
                }
            });
        });
        //绘制某个区域的边界
        function renderAreaPolygons(areaNode){
            //更新地图视野
            map.setBounds(areaNode.getBounds(), null, null, true);
            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();
            //绘制子区域
            districtExplorer.renderSubFeatures(areaNode, function(feature, i) {
                if(feature.properties.level == "province"){
                    var getsort = province;
                }
                if(feature.properties.level == "city"){
                    var getsort = city;
                }
                if(feature.properties.level == "district"){
                    var getsort = district;
                }
                var arr = [];
                for(var tmp in getsort){
                    if(getsort[tmp]!=0){
                        arr.push(getsort[tmp])
                    }
                }
                var maxSum = Math.max.apply(null, arr);
                var minSum = Math.min.apply(null,arr);
                var multiple = (maxSum-minSum)/4;
                for(var tmp in getsort){
                    if(tmp == feature.properties.adcode){
                        var sum = getsort[tmp];
                        if(sum == 0 ){  //未开发区域
                            return {
                                strokeWeight: 0.5, //线宽
                                fillColor: 'white', //填充色
                                fillOpacity: 0 //填充透明度
                            };
                        }
                        if(sum > 0 && sum <= multiple){ //第一阶段
                            return {
                                strokeWeight: 0.5,
                                fillColor: '#ff7b7b',
                                fillOpacity: 0.25
                            };
                        }
                        if(sum > multiple && sum <= multiple*2){ //第二阶段
                            return {
                                strokeWeight: 0.5,
                                fillColor: '#ff6666',
                                fillOpacity: 0.25
                            };
                        }
                        if(sum > multiple*2 && sum <= multiple*3){ //第三阶段
                            return {
                                strokeWeight: 0.5,
                                fillColor: '#ff4040',
                                fillOpacity: 0.25
                            };
                        }
                        if(sum > multiple*3 && sum <= maxSum){ //第四阶段
                            return {
                                strokeWeight: 0.5,
                                fillColor: '#ff0000',
                                fillOpacity: 0.25
                            };
                        }
                        return {
                            cursor: 'default',
                            bubble: true,
                            strokeColor: 'yellow',
                            strokeOpacity: 0.2
                        };
                    }
                }
            });
            //绘制父区域
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'yellow', //线颜色
                strokeOpacity: 0.2, //线透明度
                strokeWeight: 0.5, //线宽
                fillColor: 'white', //填充色
                fillOpacity: 0 //填充透明度
            });
        }
        //切换区域后刷新区域
        function refreshAreaNode(areaNode) {
            renderAreaPolygons(areaNode);
        }
        //切换区域
        function switch2AreaNode(adcode, callback) {
            if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                return;
            }
            loadAreaNode(adcode, function(error, areaNode) {
                if (error) {
                    if (callback) {
                        callback(error);
                    }
                    return;
                }
                currentAreaNode = window.currentAreaNode = areaNode;
                //设置当前使用的定位用节点
                districtExplorer.setAreaNodesForLocating([currentAreaNode]);
                refreshAreaNode(areaNode);
                if (callback) {
                    callback(null, areaNode);
                }
            });
        }
        //加载区域
        function loadAreaNode(adcode, callback) {
            districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
                if (error) {
                    if (callback) {
                        callback(error);
                    }
                    console.error(error);
                    return;
                }
                if (callback) {
                    callback(null, areaNode);
                }
            });
        }
        //全国
        switch2AreaNode(100000);
    });
    function showPoi(){
        function initPage(PointSimplifier, $) {
            var pointSimplifierIns, groupStyleMap;
            pointSimplifierIns = new PointSimplifier({
                zIndex: 115,
                map: map, //所属的地图实例
                getPosition: function(item) {
                    var lngLatLine = item.lngLatLine;
                    if (!lngLatLine) {
                        return null;
                    }
                    var parts = lngLatLine.split(',');
                    return [parseFloat(parts[0]), parseFloat(parts[1])];
                },
                //使用GroupStyleRender
                renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
                renderOptions: {
                    //点的样式
                    pointStyle: {
                        width: 5,
                        height: 5,
                        fillStyle:'#A2D0FA'
                    },
                    getGroupId: function(item, idx) {
                        return item.groupId;
                    },
                    groupStyleOptions: function(gid) {
                        return groupStyleMap[gid];
                    }
                }
            });
            function onIconLoad() {
                pointSimplifierIns.renderLater();
            }
            function onIconError(e) {
                alert('图片加载失败！');
                pointSimplifierIns.renderLater();
            }
            groupStyleMap = {
                '0': {
                    pointStyle: {
                        //绘制点占据的矩形区域
                        content: PointSimplifier.Render.Canvas.getImageContent(
                            '/img/shang.png', onIconLoad, onIconError),
                        //宽度
                        width: 25,
                        //高度
                        height: 25,
                        //定位点为中心
                        offset:null
                        //strokeStyle: null
                    }
                },
                '1': {
                    pointStyle: {
                        //绘制点占据的矩形区域
                        content: PointSimplifier.Render.Canvas.getImageContent(
                            '/img/jing.png', onIconLoad, onIconError),
                        //宽度
                        width: 25,
                        //高度
                        height: 25,
                        //定位点为中心
                        offset: null
                        //strokeStyle: null
                    }
                }
            };
            var latArr = [];
            var typeArr = [];
            for(var i=0;i<shop.length;i++){
                latArr.push(shop[i].lng+","+shop[i].lat);
                typeArr.push(shop[i].type)
            }
            data = [];
            for(var k=0;k<latArr.length;k++){
                if(latArr[k] != "0,0"){
                    data.push({
                        lngLatLine:latArr[k],
                        groupId:typeArr[k]
                    })
                }
            }
            pointSimplifierIns.setData(data);
            pointSimplifierIns.on('pointClick', function(e, record) {          //海量点点击事件
                $(".navBox h5").remove();
                $(".navBox h6").remove();
                $(".navBox").css("top","63%");
                for(var i=0;i<shop.length;i++){
                    var checkLatLng = shop[i].lng+","+shop[i].lat;
                    if(checkLatLng == record.data.lngLatLine){
                        $(".navBox .child").remove();
                        $(".navBox").append("<h5>"+shop[i].username+"</h5><h5><button class='openUploader_info' id="+shop[i].id+">点击查看详情信息</button></h5>");
                    }
                }
            });
        }
        AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $){
            if (!PointSimplifier.supportCanvas) {
                alert('当前环境不支持 Canvas！');
                return;
            }
            initPage(PointSimplifier, $);
        });
    }
    $(document).on('click','.openUploader',function(){
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            url:'/map/createNewArea',
            data:{
                area_code:area_code
            },
            type:'post',
            dataType: 'json',
            success:function(res){
                window.location.href="/map/index?id="+res.data+"&area_code="+area_code;
            }
        })
    });
    $(document).on('click','.openUploader_info',function(){
        var id = $(this).attr("id");
        window.location.href="/map/index?id="+id;
    })
</script>
</body>
</html>